<link type="text/css" rel="stylesheet" href="<?php echo base_url(); ?>public/css/bootstrap-datetimepicker.min.css" />
<style>
            /*custom css here*/
            #event-img-hover-text{
                text-align: center;
                
            }
            .avatar{
                margin: 0 auto; 
                float:none; 
                display: block;
                
            }
            .avatar-img:hover{
                border: 1px solid #20B2AA;
            }
            
            .block1:hover{
                background-color: #E6E1E1;
            }
            .block1{
                padding: 5px;
                
            }
            .block2:hover{
                background-color: #E6E1E1;
            }
            .block2{
                padding: 5px;
                
            }
            
            .block3:hover{
                background-color: #E6E1E1;
            }
            .block3{
                padding: 5px;
                
            }            
        </style>


<script src="<?php echo base_url(); ?>public/js/bootstrap-datetimepicker.min.js"></script>
<script src="<?php echo base_url(); ?>public/js/jquery.validate.js"></script>
<script src="<?php echo base_url(); ?>public/js/jquery-validate.bootstrap-tooltip.min.js"></script>
<script type="text/javascript">
    $(function() {
        $('#datetimepicker2').datetimepicker({
            language: 'en',
            maskInput: true,    
            format: 'dd/MM/yyyy',
            pick12HourFormat: true,
            pickTime:false
        });
    });
</script>
        

<div id="space" style="height: 50px;"></div>                 
<div class="container theme-showcase" role="main">        
<div class="row " style="margin-top: 20px;">
    <div class="span2">
                <img class="img-responsive avatar avatar-img" style="" src="<?php echo base_url(); ?>/public/img/avatar_default.jpg" alt="" />
                <span id="event-img-hover-text" class="avatar"><p><h5>Click để thay đổi hình đại diện</h5></p></span>
           
      
    </div>
    <div class="span8" style="margin-left: -2px;">
        <div class="block1 span9">
            <div class="span8 title_and_edit">
                <div class="span8" style=""><b>Thông tin cơ bản</b>
                    <div class="control-group offset1" style="float:right;">
                        <div class="controls" style="">
                            <button type="button" class="btn btn-primary btn-lg btn-block right" id="btn-lg" name="btn-lg" style="width: 65px; background: #20B2AA;">
                                Sửa
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <form class="form-horizontal leftpad">
                <div class="control-group">
                    <div class="input-group">
                        <span class="control-label">Tên hiển thị</span>
                        <div class="controls">
                            <input type="text" class="span6" placeholder="Tên hiển thị"/>
                        </div>
                    </div>
                </div>

                
                
                
<!--                <div class="control-group">
                    <div class="input-group">
                        <span class="control-label">Ngày Sinh</span>
                        <div class="controls">
                            <input type="text" class="" placeholder="Tên hiển thị"/>
                        </div>
                    </div>
                </div>-->
 <div class="control-group">
                <label class="control-label" for="textarea">Ngày sinh</label>
                <div id="datetimepicker2" class="controls">
                    <input data-format="MM/dd/yyyy HH:mm:ss PP" type="text"></input>
                    <span class="add-on">
                        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                    </span>
                    <!--                    <label class="control-label" for="textarea">Kéo dài trong</label>-->
                    <!--                    <input type="text"></input>-->

                </div>

            </div>

                <div class="control-group">
                    <div class="input-group">
                        <span class="control-label">Giới tính</span>
                        <div class="controls">
                            <select name="sex" id="sex" class="sex " >
                                <option>Giới Tính</option>
                                <option value="1">Nam</option>
                                <option value="0">Nữ</option>
                            </select>

                        </div>
                    </div>
                </div>
                <div class="control-group">
                    <div class="input-group">
                        <span class="control-label">Địa chỉ</span>
                        <div class="controls">
                            <input type="text" class="span6" placeholder="Địa chỉ"/>
                        </div>
                    </div>
                </div>
                <div class="control-group">
                    <div class="input-group">
                        <span class="control-label">Tình trạng hôn nhân </span>        
                        <div class="controls">

                            <select name="marrie" id="marrie">
                                <option value="">Tình Trạng Hôn Nhân</option>
                                <option value="">Đã Kết Hôn</option>
                                <option value="">Độc Thân</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="control-group">
                    <div class="input-group">
                        <span class="control-label">Trình độ học vấn</span>        
                        <div class="controls">

                            <select name="level" id="level" class="level">
                                <option>Trình độ học vấn</option>
                                <option value="">Trên Đại Học</option>
                                <option value="">Đại Học</option>
                                <option value="">Cao Đẳng</option>
                                <option value="">Trung Cấp</option>
                                <option value="">Phổ thông</option>
                            </select>
                        </div>
                    </div>
                </div>
            </form>
        </div >  
        
        <div class="block2 span9">
            <div class="span8 title_and_edit">
                <div class="span8" style="">
                    <b>Ngoại Hình</b>
                    <div class="control-group offset1" style="float:right;">
                        <div class="controls" style="">
                            <button type="button" class="btn btn-primary btn-lg btn-block right" id="btn-lg" name="btn-lg" style="width: 65px; background: #20B2AA;">
                                Sửa
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <form class="form-horizontal">
                <div class="control-group">
                    <div class="input-group">
                        <span class="control-label">Chiều Cao</span>
                        <div class="controls">
                            <input type="number" class="span6" id="tall" placeholder="Chiều cao" name="tall"/>
                        </div>
                    </div>
                </div>
                <div class="control-group">
                    <div class="input-group">
                        <span class="control-label">Màu Tóc</span>
                        <div class="controls">
                            <input type="text" class="span6" id="color-hair" name="color-hair" placeholder="Màu tóc của bạn"/>
                        </div>
                    </div>
                </div>
                <div class="control-group">
                    <div class="input-group">
                        <span class="control-label">Màu Mắt</span>
                        <div class="controls">
                            <input type="text" class="span6" id="color-eye" placeholder="Màu mắt :xanh ,đỏ,vàng,blabla...." name="color-eye"/>
                        </div>
                    </div>
                </div>
                <div class="control-group">
                    <div class="input-group">
                        <span class="control-label">Điểm Đẹp Nhất</span>
                        <div class="controls">
                            <input type="text" class="span6" id="beautiful" placeholder="Điểm đẹp nhất của bản thân" name="beautiful" />
                        </div>
                    </div>
                </div>

                <div class="control-group">
                    <div class="input-group">
                        <span class="control-label">Mô Tả Chung</span>
                        <div class="controls">
                            <textarea class="span6" name="common" id="common" rows="4" placeholder="Mô tả chung về bản thân" ></textarea>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="block3 span9" >
             <div class="span8 title_and_edit">
                <div class="span8" style="">
                    <b>Sở thích khác</b>
                      <div class="control-group offset1" style="float:right; ">
                        <div class="controls" style="">
                            <button type="button" class="btn btn-primary btn-lg btn-block right" id="btn-lg" name="btn-lg" style="width: 65px; background: #20B2AA;">
                                Sửa
                            </button>
                        </div>
                    </div>
              
                    
                </div>
                
            </div>
             <form class="form-horizontal">
            <div class="control-group">
                <div class="input-group">
                    <span class="control-label">Món Ăn</span>
                    <div class="controls">
                        <input type="text" class="span6" name="food" id="food" placeholder="Món ăn yêu thích..." />
                    </div>
                </div>

            </div>

            <div class="control-group">
                <div class="input-group">
                    <span class="control-label">Bài Hát</span>
                    <div class="controls">
                        <input type="text" class="span6" name="music" id="music" placeholder="Bài hát yêu thích" />
                    </div>
                </div>
            </div>

            <div class="control-group">
                <div class="input-group">
                    <span class="control-label">Thể Loại Âm Nhạc </span>
                    <div class="controls">
                        <input type="text" class="span6" name="type-music" id="type-music" placeholder="Thể loại âm nhạc yêu thích" />
                    </div>
                </div>
            </div>

            <div class="control-group">
                <div class="input-group">
                    <span class="control-label">Thể Thao</span>
                    <div class="controls">
                        <input type="text" class="span6" name="sport" id="sport" placeholder="Môn thể thao yêu thích" />
                    </div>
                </div>
            </div>

            <div class="control-group">
                <span class="control-label">Sách</span>
                <div class="input-group">
                    
                    <div class="controls">
                        <input type="text" class="span6" name="books" id="books" placeholder="Cuốn sách yêu thích" />
                    </div>
                </div>
            </div>

            <div class="control-group">
                <span class="control-label">Phim</span>
                <div class="input-group">
                    
                    <div class="controls">
                        <input type="text" class="span6" name="film" id="film" placeholder="Thể loại phim yêu thích" />
                    </div>
                </div>
            </div>

            <div class="control-group">
                    <span class="control-label">Chương Trình TV</span>
                <div class="input-group">
                
                    <div class="controls">
                        <input type="text" class="span6" name="program-tv" id="program-tv" placeholder="Chương trình TV yêu thích" />
                    </div>
                </div>
            </div>

            <div class="control-group">
                <span class="control-label">Màu Sắc</span>
                <div class="input-group">

                    <div class="controls">
                        <input type="text" class="span6" name="color" id="color" placeholder="Màu sắc yêu thích" />
                    </div>
                </div>
            </div>

            <div class="control-group">
                <span class="control-label">Mô Tả Chung</span>
                <div class="input-group">
                    <div class="controls">
                        <textarea name="describe-common" class="span6" id="describe-common" rows="4" placeholder="Mô tả chung..." ></textarea>
                    </div>
                </div>
            </div>
                 </form>
        </div>
    </div>
</div><!--end span12-->
</div>







